﻿/*!       -= Smal.Plot =-
 * Simple javascript Plotting Library, very elementary for now
 * New BSD license.
 */
(function(){

var window = this,
	Smal = window.Smal = window.Smal || {},
	E = function(tag, att){var elem = document.createElement(tag); for(var i in att){ elem[i] = att[i]} return elem},
	I = function(id) { return document.getElementById(id)},
	Plot = Smal.Plot = Smal.Plot || function( data, options) {
		if(!(this instanceof Plot))
			return new Plot( data, options);
		this.init( data, options );
		return this;
	},
	uuid = function(){var id = id || -1;return (++id).toString() + Math.random()*10 << 0};




Plot.fn = Plot.prototype = {
	init: function( data, options) {
		var opt = {scale:5,parent:0,width:300,height:150,min:0,max:100};
			
		for(var i in opt)
			this[i] = options[i] || opt[i];
		if(this.scale.x || this.scale.y)
			this.scale = {x:this.scale.x || opt.scale,y:this.scale.y || opt.scale};
		if(typeof this.scale == "number")
			this.scale = {x:this.scale,y:this.scale};
		//init canvas
		var cC = this.canvas = E("canvas", {className:"main", width:this.scale.x, height:this.scale.y}),
			oC = this.overlay = E("canvas", {className:"overlay", width:this.width, height:this.height}),
			c = this.canvas.ctx = cC.getContext("2d"), o = this.overlay.ctx = oC.getContext("2d");
		oC.style.cssText = "margin-left:-" + this.width + "px;";
		c.strokeStyle = "#eee";
		c.strokeRect(0,0,cC.width,cC.height);
		o.fillStyle = o.createPattern(cC, "repeat");
		o.save();
		o.translate(oC.width/2,oC.height/2);
		o.fillRect(-oC.width/2,-oC.height/2,oC.width,oC.height);
		o.restore();
		o.moveTo(0,oC.height/2);
		o.lineTo(oC.width,oC.height/2);
		o.moveTo(oC.width/2,0);
		o.lineTo(oC.width/2,oC.height);
		o.stroke();
		cC.width = oC.width;cC.height = oC.height;
		c.translate(cC.width/2,cC.height/2);
		c.scale(1,-1);//reflect in y axis
		this.Draw = this.draw.fill;
		if( data ) {
			//this.data=this.data || [];this.data.push(opt.data);
			this.Parse( data )
		}
		//check if there is a html element(i.e Dom node) to append
		if(this.parent.nodeType){
			this.parent.appendChild(cC);
			this.parent.appendChild(oC);
		}
	},
	Parse: function( data ){
		var cC = this.canvas;//, data = opt.data;
		if( typeof data == "function" ) {
			for (var x=-cC.width/2, val, arr = []; x < cC.width; x++ ) {
				val =  data(x/this.scale.x)*this.scale.y<<0 ;
				if( val != NaN )
					arr.push([ x, val]);
				else
					console.warn("NaN:",val);
			}
			this.Parse(arr);
		}else if( data instanceof Array ) {
			if( typeof data[0][0] == "number" ) { this.Draw(data) }
			else if( data != "undefined" ){
				for (var i=0, l=data.length; i < l; i++) {
					this.Parse(data[i]);
				}
			}else{ console.warn("typeof data == undefined") }
		}else{ console.warn("unknown data type: ", data) }
	},
	draw : {
		fill: function( data ){
			var c=this.canvas.ctx;
			//c.save();
			c.strokeStyle = "#6af";
			c.fillStyle = "rgba("+(Math.random()*255<<0).toString()+","+(Math.random()*255<<0).toString()+",255,0.5)";
			c.beginPath();
			c.moveTo(data[0][0],data[0][1]);
			for (var x=1, l=data.length; x < l; x++) {
				c.lineTo(data[x][0],data[x][1]);
			}
			c.closePath();
			c.stroke();
			c.fill();
			//c.restore();
		}
	}
};

})();

